<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">门店返利</el-breadcrumb-item>
        <el-breadcrumb-item>返利执行</el-breadcrumb-item>
      </el-breadcrumb>

      <div>
        <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">保存</el-button>
    </div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="详情" name="first">
        <div class="qup-title-box"><span class="border" /><span>返利执行</span></div>
        <el-form
          ref="refForm"
          :rules="formRules"
          :model="formData"
          size="mini"
          label-width="150px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="门头是否处理:" prop="isDheadHandle">
                <el-select
                  v-model="formData.isDheadHandle"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="卖场硬装是否处理:" prop="isShopHardcoverHandle">
                <el-select
                  v-model="formData.isShopHardcoverHandle"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="软装是否处理:" prop="isShopSoftwearHandle">
                <el-select
                  v-model="formData.isShopSoftwearHandle"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门头返利时间:" prop="dheadRebateTime">
                <el-date-picker
                  v-model="formData.dheadRebateTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="首返时间:" prop="firstStartTime">
                <el-date-picker
                  v-model="formData.firstStartTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  clearable
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="月返开始时间:" prop="monthStartTime">
                <el-date-picker
                  v-model="formData.monthStartTime"
                  type="date"
                  clearable
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  @change="changeMonthStart"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- 系统根据月返开始时间+12个月后自动计算 -->
              <el-form-item label="预计月返结束时间:" prop="expectMonthEndTime">
                <el-date-picker
                  v-model="formData.expectMonthEndTime"
                  type="date"
                  disabled
                  clearable
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="返利是否结束:" prop="isRebate">
                <el-select
                  v-model="formData.isRebate"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="changeIsRebate"
                >
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="formData.isRebate===1" :span="8">
              <el-form-item :rules="{ required: formData.isRebate===1, message: '请选择实际返利结束时间' }" label="实际返利结束时间:" prop="actualEndTime">
                <el-date-picker
                  v-model="formData.actualEndTime"
                  type="date"
                  clearable
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最早装修进场时间:">
                {{ detailData.actualApproachTime }}
              </el-form-item></el-col>
          </el-row>
        </el-form>
        <div v-loading="dataLoading">
          <!-- 返利基础信息 -->
          <base-info :detail-data="detailData" />
          <c-list :column="3">
            <c-list-item label="成品账号编码" :value="detailData.endProAccountCode" />
            <c-list-item label="成品账号名称" :value="detailData.endProAccountName" />
            <c-list-item label="定制账号编码" :value="detailData.customizedAccountCode" />
            <c-list-item label="定制账号名称" :value="detailData.customizedAccountName" />
            <c-list-item label="卖场返利核算" :value="detailData.shopAccounting" />
            <c-list-item label="门头返利核算" :value="detailData.dheadAccounting" />
            <c-list-item label="是否涉及月返" dict-type-code="BOOLEANS" :value="detailData.isMonthReturn" />
            <c-list-item label="工程款结算是否存在异常" dict-type-code="BOOLEANS" :value="detailData.isPaymentException" />
            <c-list-item label="异常处理结果" :value="detailData.exceptionHandleResult" />
          </c-list>
        </div>
      </el-tab-pane>
      <el-tab-pane label="验收面积明细" name="second">
        <CheckArea preview :data="tableData" />
      </el-tab-pane>
      <el-tab-pane label="扣款异常" name="third">
        <abnormal-deduct :id="id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import abnormalDeduct from './component/abnormalDeduct.vue'
import baseInfo from './component/rebateBaseInfo.vue'
import BackPageMixin from '@/mixins/backPage'
import { getDetailById, saveRebateExecute } from '@/api/shopRebate'
import CheckArea from '@/views/check/hard/execute/components/checkArea'
import { getSeriesByAccId } from '@/api/shopRebate'

export default {
  name: 'RebateExecute',
  components: { abnormalDeduct, baseInfo, CheckArea },
  mixins: [BackPageMixin],
  props: {
  },
  data() {
    return {
      tableData: [],
      saveLoading: false,
      dataLoading: false,
      detailData: {},
      activeName: 'first',
      formRules: {},
      id: '',
      formData: {
        isDheadHandle: 0,
        isShopHardcoverHandle: 0,
        isShopSoftwearHandle: 0,
        dheadRebateTime: '',
        firstStartTime: '',
        monthStartTime: '',
        expectMonthEndTime: '',
        isRebate: 0,
        id: '',
        actualEndTime: '',
        actualApproachTime: ''
      }
    }
  },
  async created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.dataLoading = true
      await getDetailById(this.id).then(res => {
        const { isDheadHandle = 0,
          isShopHardcoverHandle = 0,
          isShopSoftwearHandle = 0,
          dheadRebateTime,
          firstStartTime,
          monthStartTime,
          expectMonthEndTime,
          isRebate = 0,
          id,
          hardId,
          softId,
          actualEndTime,
          actualApproachTime } = res.data
        this.formData = { isDheadHandle,
          isShopHardcoverHandle,
          isShopSoftwearHandle,
          dheadRebateTime,
          firstStartTime,
          monthStartTime,
          expectMonthEndTime,
          isRebate,
          id,
          hardId,
          softId,
          actualEndTime,
          actualApproachTime }
        if (res.success === 1) {
          this.detailData = res.data
          this.dataLoading = false
        }
      }).catch(() => {
        this.dataLoading = false
      })

      getSeriesByAccId({ hardId: this.formData.hardId, softId: this.formData.softId }).then(res => {
        if (res.success === 1) {
          const types0 = this.handlerDataArea(res.data.filter(e => e.types == 0))
          const types1 = this.handlerDataArea(res.data.filter(e => e.types == 1))
          this.tableData = [...types1, ...types0]
        }
      })
    }
  },
  methods: {
    changeIsRebate(data) {
      if (!data) this.formData.actualEndTime = ''
    },
    // 处理区域数据
    handlerDataArea(data) {
      const t = {}
      data.forEach(e => {
        const key = e.configAreaId
        if (!t[key]) {
          t[key] = []
        }
        t[key].push(e)
      })

      // 按照方案合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.programId || item.programName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照方案合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            e.group = v
            result.push(e)
          })
        }
      }
      return result
    },
    // 改变返利开始时间，更改返利结束时间
    changeMonthStart(date) {
      if (!date) {
        this.formData.expectMonthEndTime = ''
      } else {
        const year = Number(date.slice(0, 4)) + 1
        this.formData.expectMonthEndTime = year.toString() + date.slice(4)
      }
    },
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          if (this.formData.isRebate === 1) { this.$set(this.formData, 'schedule', 'D') }
          saveRebateExecute(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.$store.dispatch('views/goBack')
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
